<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <div class="base-content-operate">
        <el-button icon="el-icon-plus" type="primary" @click="onNew">{{
          operateType.add
        }}</el-button>
        <el-button type="primary" @click="Export">{{
          operateType.import
        }}</el-button>
        <el-button type="primary" @click="startEvaluation">{{
          supplier.initiateEvaluation
        }}</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="list"
        class="filter unsetborder"
        :class="{ 'show-filter': showFilterRow }"
        element-loading-text="Loading"
        fit
        highlight-current-row
        height="calc(100% - 190px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55">
          <el-table-column type="selection"></el-table-column>
        </el-table-column>
        <el-table-column align="center" width="50">
          <template #header>
            <div class="filter-icon" :title="operateType.screen">
              <SvgIcon
                class-name="filter"
                icon-class="filter"
                @click="filterIconClick"
              />
            </div>
          </template>
          <el-table-column width="50"></el-table-column>
        </el-table-column>
        <el-table-column :label="supplier.supplierNumber">
          <el-table-column prop="num">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.num"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              <el-link type="primary" @click="toView(scope.row)">
                {{ scope.row.num }}</el-link
              >
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="supplier.supplierName">
          <el-table-column prop="supplierName">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.supplierName"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="supplier.supplyProducts">
          <el-table-column prop="supplyProduct">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.supplyProduct"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="supplier.contactAddress">
          <el-table-column prop="address"> </el-table-column>
        </el-table-column>
        <el-table-column :label="supplier.contacts">
          <el-table-column prop="contact"> </el-table-column>
        </el-table-column>
        <el-table-column :label="supplier.telephone">
          <el-table-column prop="phone"> </el-table-column>
        </el-table-column>
        <el-table-column :label="supplier.initiateEvaluation">
          <el-table-column prop="evaluationStateName">
            <template #header>
              <el-select
                v-if="showFilterRow"
                v-model="queryForm.evaluationState"
                :placeholder="operateType.pleaseSelect"
              >
                <el-option
                  v-for="item in stateList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="supplier.score">
          <el-table-column prop="evaluationScore"> </el-table-column>
        </el-table-column>
        <el-table-column :label="supplier.latestEvaluationTime">
          <el-table-column prop="evaluationTime">
            <template #header>
              <el-date-picker
                v-model="queryForm.evaluationTimeList"
                type="datetimerange"
                :range-separator="operateType.to"
                :start-placeholder="operateType.startDate"
                :end-placeholder="operateType.endDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="supplier.status">
          <el-table-column prop="phone">
            <template #header>
              <el-select
                v-if="showFilterRow"
                v-model="queryForm.status"
                :placeholder="operateType.pleaseSelect"
              >
                <el-option
                  v-for="item in supplieStatusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
            <template slot-scope="scope">
              <span>{{ Status[scope.row.status] }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="supplier.creationTime">
          <el-table-column prop="createTime">
            <template #header>
              <el-date-picker
                v-model="queryForm.createTimeList"
                type="datetimerange"
                :range-separator="operateType.to"
                :start-placeholder="operateType.startDate"
                :end-placeholder="operateType.endDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </template>
            <template slot-scope="scope">
              <span>{{ formatTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column :label="operateType.action">
          <el-table-column>
            <template #header>
              <div v-if="showFilterRow" class="search-operate">
                <el-link type="primary" @click="onQuery">{{
                  operateType.search
                }}</el-link>
                <el-link @click="cancelForm">{{ operateType.clear }}</el-link>
              </div>
            </template>
            <template slot-scope="scope">
              <div class="base-table-operation">
                <!-- <el-link
                  size="mini"
                  type="primary"
                  @click="handlelook(scope.row)"
                  >查看</el-link
                > -->
                <el-link type="primary" @click="handleEdit(scope.row)">{{
                  operateType.redact
                }}</el-link>
                <el-link type="danger" @click="handleDelete(scope.row)">{{
                  operateType.delete
                }}</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
    <SupplierEdit
      v-model="isShowDialog"
      :read-only="readOnlyInfo"
      :edit-id="editId"
      @success="DialogCall"
    />
  </div>
</template>
<script>
import {
  getList,
  Status,
  deleteRange,
} from "../../../api/Supplier/Supplier.js";
import SupplierEdit from "./SupplierEdit.vue";
import { export_json_to_excel } from "@/vendor/Export2Excel";
import { formatTime } from "../../../utils/time";
export default {
  name: "SupplierList",
  components: { SupplierEdit },
  data() {
    return {
      formatTime,
      loading: true,
      list: [],
      tableDatas: [],
      supplieStatusList: [
        {
          label: this.$t("ModuleSysBusiness.OperateType.all"),
          value: -1,
        },
        {
          label: this.$t("Supplier.enable"),
          value: 1,
        },
        {
          label: this.$t("Supplier.disable"),
          value: 2,
        },
      ],
      stateList: [
        {
          label: this.$t("ModuleSysBusiness.OperateType.all"),
          value: -1,
        },
        {
          label: this.$t("Supplier.notRated"),
          value: 0,
        },
        {
          label: this.$t("Supplier.qualified"),
          value: 1,
        },
        {
          label: this.$t("Supplier.unqualified"),
          value: 2,
        },
      ],
      Status,
      queryForm: {
        num: "",
        supplierName: "",
        supplyProduct: "",
        status: -1,
        evaluationState: -1,
        evaluationCreateTimeStart: null,
        evaluationCreateTimeEnd: null,
        createTimeStart: null,
        createTimeEnd: null,
        evaluationTimeList: [],
        createTimeList: [],
      },
      showFilterRow: false,
      isShowDialog: false,
      readOnlyInfo: false,
      editId: "",
      tHeader: [
        this.$t("Supplier.supplierNumber"),
        this.$t("Supplier.supplierName"),
        this.$t("Supplier.supplyProducts"),
        this.$t("Supplier.contactAddress"),
        this.$t("Supplier.contacts"),
        this.$t("Supplier.telephone"),
        this.$t("Supplier.assessStatus"),
        this.$t("Supplier.score"),
        this.$t("Supplier.latestEvaluationTime"),
        this.$t("Supplier.status"),
        this.$t("Supplier.creationTime"),
      ],
      filterVal: [
        "num",
        "supplierName",
        "supplyProduct",
        "address",
        "contact",
        "phone",
        "evaluationState",
        "evaluationScore",
        "evaluationTime",
        "statusName",
        "createTime",
      ],
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    supplier() {
      return this.$t("Supplier") || {};
    },
  },
  created() {
    this.getList();
  },
  methods: {
    startEvaluation() {
      if (this.tableDatas === null || this.tableDatas.length === 0) {
        this.$message.error(this.$t("Supplier.selectPieceData"));
        return false;
      }
      if (this.tableDatas.length > 1) {
        this.$message.error(this.$t("Supplier.pieceDataSelected"));
        return false;
      }
      this.$router.push({
        path: "/SupplierEvaluationList",
        query: { id: this.tableDatas[0].id },
      });
    },
    export_json_to_excel,
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    Export() {
      getList(this.queryForm, { pageIndex: 1, pageSize: 100000 })
        .then((res) => {
          var data = this.formatJson(this.filterVal, res.data.dataList);
          export_json_to_excel({
            header: this.tHeader, // 表头
            data, // 数据
            filename: this.$t("Supplier.supplierExport"), // 导出文件名
            autoWidth: true, // 导出宽度自动
            bookType: "xlsx", // 导出后缀
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },
    toView(row) {
      this.handlelook(row);
    },
    handleSelectionChange(val) {
      this.tableDatas = val;
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    filterIconClick() {
      this.showFilterRow = !this.showFilterRow;
      !this.showFilterRow && this.cancelForm();
    },
    cancelForm() {
      this.queryForm = this.$options.data().queryForm;
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handlelook(row) {
      this.readOnlyInfo = true;
      this.editId = row.id;
      this.isShowDialog = true;
    },
    handleEdit(row) {
      this.readOnlyInfo = false;
      this.editId = row.id;
      this.isShowDialog = true;
    },
    // 删除
    handleDelete(row) {
      this.$confirm(
        this.$t("Supplier.sureDeleteData"),
        this.$t("ModuleSysBusiness.OperateType.delete"),
        {
          type: "warning",
          confirmButtonText: this.$t("ModuleSysBusiness.OperateType.delete"),
          okType: "danger",
          center: true,
          cancelButtonText: this.$t("ModuleSysBusiness.OperateType.cancel"),
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              deleteRange({ id: row.id })
                .then((res) => {
                  this.getList();
                })
                .finally(() => {
                  instance.confirmButtonLoading = false;
                  done();
                });
            } else {
              instance.confirmButtonLoading = false;
              done();
            }
          },
        }
      );
    },
    onNew() {
      this.editId = "";
      this.readOnlyInfo = false;
      this.isShowDialog = true;
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      if (
        this.queryForm.createTimeList !== null &&
        this.queryForm.createTimeList.length !== 0
      ) {
        this.queryForm.createTimeStart =
          this.queryForm.createTimeList[0] + " 00:00:00";
        this.queryForm.createTimeEnd =
          this.queryForm.createTimeList[1] + " 23:59:59";
      }
      if (
        this.queryForm.evaluationTimeList !== null &&
        this.queryForm.evaluationTimeList.length !== 0
      ) {
        this.queryForm.evaluationCreateTimeStart =
          this.queryForm.evaluationTimeList[0] + " 00:00:00";
        this.queryForm.evaluationCreateTimeEnd =
          this.queryForm.evaluationTimeList[1] + " 23:59:59";
      }

      this.getList();
    },
    // 查看
    DialogCall() {
      this.getList();
    },
  },
};
</script>
